<template>
<div>
    <van-nav-bar title="用户注册" left-text="返回"  class="leader"  left-arrow @click-left="handleBack">
        <template #right >
            <van-icon name="ellipsis" size='26px' color='#333' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
            <Pulltab 
            v-if="ShowHidden" 
            @click.stop=""
            />
        </template>
    </van-nav-bar>
    <van-form @submit="onSubmit">
    <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="您的姓名"
        :rules="[{ required: true,pattern:/^[\u4E00-\u9FFF]+$/}]"
        label-align="center"
    />
    <van-field
        v-model="tel"
        name="phone"
        label="电话号码"
        placeholder="请输入您的电话号码"
        :rules="[{ required: true,pattern:/^(1(([35][0-9])|(47)|[8][01236789]))\d{8}$/ }]"
        label-align="center"
    />
    <van-field
        v-model="email"
        name="email"
        label="邮箱"
        placeholder="请输入您的邮箱"
        :rules="[{ required: true,pattern:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ }]"
        label-align="center"
    />
    <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, pattern:/^(?:(?!\s).){6,}$/}]"
        label-align="center"
    />
    <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" class="register">注册</van-button>
    </div>
    </van-form>
    <van-checkbox v-model="checked" shape="square" checked-color="#00D2C3" class="checkBox">我已阅读并同意<span class="agree">《160大药房服务协议》</span></van-checkbox>
</div>
</template>

<script>
import {reg} from '../api/user'
import  Pulltab from '../components/Pulltab.vue'
import { Toast } from 'vant';
export default {
    components: {
        Pulltab
    },
  data() {
    return {
        checked:true,
        ShowHidden: false,
        username: '',
        password: '',
        tel:'',
        email:'',
        surepass:''
    };
  },
  methods: {
    onSubmit(values) {
      console.log( values);
    //   let username = values
      reg(values).then(res=>{
          console.log(res)
          let {code,msg} = res.data
            // if(code==100){
            //     Toast.fail(msg);
            // }else{
            //     Toast.success(msg);
            // }
        })
    },
     HiddenClick () {
        this.ShowHidden = false
    },
    handleBack(){
        this.$router.go(-1)
    }
  },
  mounted () {
    document.addEventListener('click', this.HiddenClick)
    },
};
</script>

<style src="../assets/css/register.css" scoped>
</style>
<style scoped >
::v-deep .van-nav-bar .van-icon{
    color:#333;
    font-size: 20px;
}
::v-deep .van-nav-bar__left span,::v-deep .van-nav-bar__title{
    color: #333;
    font-size: 16px;
}
</style>